<template>
  <div class="app-container">
    <complex-table :ref="tableRef" :datas="tableData" />

    <!--  新增  -->
    <post-add :ref="addRef" />
  </div>
</template>

<script>
import ComplexTable from '@/components/ComplexTable/index'
import PostAdd from './add'
import { MD5 } from '@/utils'
import { search as searchApi, dels } from '@/api/sys/post'

export default {
  name: 'Post'
  , components: { ComplexTable, PostAdd }
  , data() {
    const key = MD5(this.$vnode.key + this.$vnode.tag)
    const tableRef = 'table_' + key
    const addRef = 'add_' + key
    const othis = this

    return {
      tableRef: tableRef
      , addRef: addRef
      , tableData: {
        full: 222
        , title: '部门岗位'
        , page: true // 开启分页
        , searchList: searchApi // 搜索接口
        , cols: [[ // 表头
          { type: 'checkbox', align: 'center', fixed: 'left' }
          , { field: 'id', type: 'long', search: true, align: 'center', title: 'ID', width: 100, sort: true, fixed: 'left', totalRowText: '合计：' }
          , { field: 'title', type: 'string', search: true, title: '岗位名称', width: 120, fixed: 'left' }
          , { field: 'dept_title', type: 'string', search: true, title: '部门名称', width: 120 }
          , { field: 'sort', type: 'integer', title: '排序' }
          , { field: 'status', type: 'selections', title: '状态', align: 'center', width: 110, selections: [
            { label: '启用', value: 1 }
            , { label: '禁用', value: 0 }
          ] }
          , { field: 'remark', type: 'string', title: '描述' }
          , { field: 'created_at', type: 'date-time', title: '操作时间', align: 'center', sort: true }
          , { fixed: 'right', title: '操作', width: 260, align: 'center', toolbar: '#barDemo', actions: [
            {
              label: '修改'
              , icon: 'el-icon-edit'
              , event: this.showAddEdit
            }
            , {
              label: '删除'
              , icon: 'el-icon-delete'
              , event: this.delAction
            }
          ] }
        ]]

        , buttonBars: [
          {
            type: 'primary'
            , title: '新增'
            , icon: 'el-icon-plus'
            , event: this.showAddEdit
          }
          , {
            type: 'danger'
            , title: '删除'
            , icon: 'el-icon-delete'
            , event: this.delsAction
            , disabled: (selections) => {
              return !selections || selections.length <= 0
            }
          }
        ]
      }
    }
  }
  , created() {

  }
  , methods: {
    // 刷新表格
    tableReload() {
      this.$refs[this.tableRef].getList()
    }

    // 新增
    , showAddEdit(data, e) {
      if (typeof e === 'number') {
        this.$refs[this.addRef].showAddEdit()
      } else {
        this.$refs[this.addRef].showAddEdit(data, true)
      }
    }

    // 批量删除
    , delsAction(selects) {
      if (selects && selects.length > 0) {
        const ids = selects.map(val => val.id).join(',')
        this.$confirm('是否确认删除ID为[' + ids + ']的数据项?', '警告', {
          confirmButtonText: '确定'
          , cancelButtonText: '取消'
          , type: 'warning'
        }).then(() => {
          dels(ids).then(res => {
            // 获取数据
            this.tableReload()
            // 提示信息
            this.$message({ message: res.message, type: 'success' })
          })
        }).catch(() => {})
      }
    }

    // 单条删除
    , delAction(data) {
      this.$confirm('是否确认删除部门岗位[' + data.title + ']数据项？', '警告', {
        confirmButtonText: '确定'
        , cancelButtonText: '取消'
        , type: 'warning'
      }).then(() => {
        dels(data.id).then(res => {
          // 获取数据
          this.tableReload()
          // 提示信息
          this.$message({ message: res.message, type: 'success' })
        })
      })
    }
  }
}
</script>
